<script setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';

  let path = ref('')
  let router = useRouter()
  
  function go(id, language){
    router.push(`/showDetail/${id}/${language}`)
  }

  function go2(id, language){
    router.push(`/showDetail2?id=${id}&language=${language}`)
  }

</script>

<template>
  
  <div>
    <!-- 这里先点击了“声明式路由携带路径参数”，跳转showDetail页面即加载showDatil页面后会将响应式数据填入showDatil页面的相应位置，但是当再点击“编程式路由携带路径参数”时，由于
     页面不会切换，则不会重新加载页面，但是路径参数其实是带去showDatil页面了，但是由于页面没有重新加载，所以响应式数据没有变化，此时如果直接刷新页面可以生效，但是一般在showDatil
     页面使用vue的生命周期的onUpdated函数，将路由参数更新到响应式数据上，从而更新dom树 -->
    <router-link to="/showDetail/1/java">声明式路由携带路径参数</router-link>
    <button @click="go(2, 'Python')">编程式路由携带路径参数</button>
    <hr>
    <router-view></router-view>
    <hr>
    <router-link to="/showDetail2?id=1&language=java">声明式路由携带键值对参数</router-link>
    <button @click="go2(2, 'Python')">编程式路由携带键值对参数</button>
  </div>
</template>

<style scoped>

</style>
